<template>
    <div id="productMarkting" class="productMarkting">
		<div class="content_wrap">
            <div id="chart_wrap"></div>
            <!-- <el-diver></el-diver> -->
            <HJTabel :tableData="tableData" :tableColumn="tableColumn" :hasPagination="false">
                <!-- <template #optSlot>
                    <el-button type="primary" icon="el-icon-download" @click="doExport" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>
                </template> -->
            </HJTabel>
		</div>
	</div>
</template>

<script>
// import PanelWrap from '@/components/PanelWrap'
// import {exporYLSJData} from '@/api/index.js'
// import { saveAs } from 'file-saver'
export default {
	name:'productMarkting',
	data(){
		return {
            myChart:null,
            tableData:[],
            tableColumn:[
                {
                    prop:'date',
                    label:'时间'
                },
                {
                    prop:'incomingWater',
                    label:'来水量（万吨）'
                },
                {
                    prop:'waterProduction',
                    label:'供水量（万吨）'
                },
                {
                    prop:'waterSale',
                    label:'售水量（万吨）'
                },
                {
                    prop:'recorder',
                    label:'记录人'
                }
            ],

		}
	},
	components:{
		// PanelWrap,
        HJTabel:() => import('@/components/hjTable/HJTable')
	},
	mounted(){
		this.getTableData();
	},
	methods:{
		getTableData(){
            this.$axios.post('http://43.136.137.111:9898/jiangan/product/sale',{}).then(res => {
                this.tableData = res.data.data;
                let dataArr = [];
                let comingWaters = [];
                let productWaters = [];
                let saleWaters = [];
                let lossProportion = [];
                for (const key in res.data.data) {
                    let incomingWater = res.data.data[key].incomingWater;
                    let waterProduction = res.data.data[key].waterProduction;
                    let waterSale = res.data.data[key].waterSale;
                    dataArr.push(res.data.data[key].date);
                    comingWaters.push(incomingWater);
                    productWaters.push(waterProduction);
                    saleWaters.push(waterSale);
                    //漏损率
                    console.log(((waterProduction-waterSale) / waterProduction).toFixed(4));
                    let num = (waterProduction-waterSale) / waterProduction * 100;
                    lossProportion.push(num.toFixed(2));
                }
                this.paintCharts(dataArr,comingWaters,productWaters,saleWaters,lossProportion);
            });
		},
		// //导出
		// doExport(){
		// 	this.fullscreenLoading = true;
		// 	exporYLSJData({ids:this.selectIds}).then(res => {
		// 		let blob = new Blob([res.data])
		// 		const fliName = '压力数据'+new Date().getTime()+ '.xlsx'
		// 		saveAs(blob,fliName)
		// 		this.fullscreenLoading = false;
		// 	}).catch(error => {
		// 		console.log(error)
		// 	})
		// },
		// //选择		
		// selectChange(selection){
		// 	let arr = [];
		// 	selection.forEach(element => {
		// 		arr.push(element.id)
		// 	});
		// 	this.selectIds = arr;
		// }
        paintCharts(dataArr,comingWaters,productWaters,saleWaters,lossProportion){
            console.log(dataArr)
            console.log(comingWaters)
            let option = {
                textStyle:{
                    color:'#FFFFFF',
                    fontSize:'14px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['来水量','供水量','售水量'],
                    right:10,
                    top:10,
                    itemWidth:14,
                    itemHeight:8,
                    textStyle:{
                        color:'#FFFFFF'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: dataArr,
                    lineStyle:{
                        color:'rgba(255, 255, 255, 0.2)'
                    },
                    splitLine:{
                        show:false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitLine:{
                            lineStyle:{
                                color:'rgba(255, 255, 255, 0.2)'
                            }
                        },
                        name:'万吨'
                    },
                    {
                        type: 'value',
                        splitLine:{
                            lineStyle:{
                                color:'rgba(255, 255, 255, 0.2)'
                            }
                        },
                        name:'漏损率(%)'
                    }
                ],
                series: [
                    {
                        data: comingWaters,
                        type: 'bar',
                        barWidth :20,
                        name:'供水量（万吨）'						
                    },
                    {
                        data: productWaters,
                        type: 'bar',
                        barWidth :20,
                        name:'产水量（万吨）'					
                    },
                    {
                        data: saleWaters,
                        type: 'bar',
                        barWidth :20,
                        name:'售水量（万吨）'						
                    },{
                        data: lossProportion,
                        type: 'line',
                        // barWidth :20,
                        name:'漏损率（%）'	
                    }
                ],
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                },
            }
            this.myChart = this.$echarts.init(document.getElementById('chart_wrap'));
            this.myChart.setOption(option);
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
	}
}
</script>

<style lang="less" scoped>
.productMarkting{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
            height: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
            display: flex;
            flex-direction: column;
            #chart_wrap{
                height: 350px;
            }
			.el-table, .el-table__expanded-cell{
				background-color: transparent;
			}
			.el-table{
                flex:1;
				margin-top: 10px;
				tr{
					height: 56px;
					background:transparent;
					color: rgba(255, 255, 255, 0.65);
				}
				.el-table th.el-table__cell{
					background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
				}	
				th.el-table__cell{
					background: rgba(11, 117, 216, 0.1);;
				}
				td.el-table__cell, th.el-table__cell.is-leaf{
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
				}
			}
		  
			.el-table::before{
				display: none;
			}
			.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
					background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
					color: rgba(2, 154, 250, 1);
				}
				
			.el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-button--primary:hover{
				border-color: rgba(2, 154, 250, 1);;
				color: rgba(2, 154, 250, 1);
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			.block{
				margin-top: 10px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				.el-input__inner{
					border: 1px solid rgba(255, 255, 255, 0.3);
					background: transparent;
				}
				.el-pager li{
					background: transparent;
				}
				.el-pagination .btn-next, .el-pagination .btn-prev{
					background: transparent;
				}
				span,input,i,li{
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>